<template>
  <div class="message-item">
    <div class="left-info">
      <img
        v-if="item.type === MsgTypeEnum.HOMEWORK"
        class="msg-icon"
        src="@/assets/images/message/msg-homework.svg?url"
      />
      <img
        v-else
        class="msg-icon"
        src="@/assets/images/message/msg-class.svg?url"
      />
      <div class="info-text">
        <div class="top">
          <span class="title">{{ titlePrefix }}{{ item.title }}</span>
          <span class="unpublished-tag" v-if="isUnpublished">待发布</span>
        </div>
        <div class="bottom">
          <span class="bottom-item"
            >通知时间:&nbsp;{{
              dayjs(item.notify_time).format('YYYY-MM-DD HH:mm')
            }}</span
          >
          <span class="bottom-item" v-if="item.target_info?.target_name">
            发布对象:&nbsp;{{ item.target_info.target_name }}等{{
              item.target_info.target_count
            }}人
          </span>
          <span class="bottom-item" v-else>
            发布对象:&nbsp;{{
              item.class_info?.map(v => v.class_name).join(' ')
            }}
          </span>
        </div>
      </div>
    </div>
    <div class="right-handler">
      <div
        class="handler-item"
        v-if="isUnpublished"
        @click="$emit('editMessage', item.message_id)"
      >
        编辑
      </div>
      <div class="handler-item" @click="toMsgDetail">详情</div>
      <div
        class="handler-item red"
        @click="emits('deleteMessage', item.message_id)"
      >
        删除
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { subjectMap } from '@/constants'
import { MsgTypeEnum, MsgStatusEnum } from '../constant'

const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['editMessage', 'deleteMessage'])

const router = useRouter()

const isUnpublished = computed(() => props.item.is_send === 0)

const titlePrefix = computed(() =>
  props.item.type === MsgTypeEnum.HOMEWORK
    ? `【${subjectMap[props.item.subject]}作业】`
    : '【班级通知】'
)

const toMsgDetail = () => {
  router.push({
    name: 'msgDetail',
    query: {
      msgId: props.item.message_id,
      release: props.item.is_send
        ? MsgStatusEnum.PUBLISHED
        : MsgStatusEnum.UNPUBLISHED
    }
  })
}
</script>

<style lang="less" scoped>
.message-item {
  box-sizing: border-box;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 20px 30px;
  border-radius: 15px;
  border: 1px solid #cdced1;
  font-size: 16px;

  .left-info {
    display: flex;

    .msg-icon {
      width: 60px;
      margin-right: 30px;
    }

    .info-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
        .title {
          max-width: 905px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 18px;
          font-weight: bold;
          color: rgba(4, 11, 26, 0.75);
        }
        .unpublished-tag {
          width: 58px;
          height: 24px;
          margin-left: 16px;
          line-height: 24px;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          color: #d89b25;
          border-radius: 2px;
          background-color: rgba(216, 155, 37, 0.15);
        }
      }
      .bottom {
        color: #b4b6ba;
        :first-child {
          margin-right: 30px;
        }
      }
    }
  }

  .right-handler {
    display: flex;

    .handler-item {
      margin-left: 40px;
      color: #428fff;
      cursor: pointer;
      &.red {
        color: #ff6d65;
      }
    }
  }
}
</style>
